<template>
	<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large">
		<el-form-item prop="user">
			<el-input v-model="form.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')">
				<!-- <template #append>
					<el-select v-model="userType" style="width: 130px;">
						<el-option :label="$t('login.admin')" value="admin"></el-option>
						<el-option :label="$t('login.user')" value="user"></el-option>
					</el-select>
				</template> -->
			</el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
		</el-form-item>
		<el-form-item prop="captcha" v-if="showCaptcha">
			<el-input style="width: 56%;" v-model="form.captcha" prefix-icon="el-icon-lock" clearable :placeholder="$t('login.captcha')"></el-input>
			<el-image :src="captchaUrl" style="cursor: pointer; width: 32%;border: solid 1px #dcdfe6; border-radius: 5px; height: 39px;"></el-image>
			<el-button style="width: 10%; font-size: 20px; text-align: center;" @click="randomImage" icon="el-icon-refresh"></el-button>
		</el-form-item>
		<el-form-item style="margin-bottom: 10px;">
				<el-col :span="12">
					<el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
				</el-col>
				<!-- <el-col :span="12" class="login-forgot">
					<router-link to="/reset_password">{{ $t('login.forgetPassword') }}？</router-link>
				</el-col> -->
				<el-col :span="12" class="login-forgot">
					<el-link @click.stop="setAdmin" v-show="showIdLink">管理员</el-link>&nbsp;
					<el-link @click.stop="setUser" v-show="showIdLink">一般用户</el-link>
				</el-col>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
		</el-form-item>
		<div class="login-reg" v-if="$CONFIG.MY_SHOW_REGISTER_LINK">
			{{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
		</div>
	</el-form>
</template>

<script>
	import config from "@/config"
	import { v4 as uuidv4 } from "uuid"
	export default {
		data() {
			return {
				userType: 'admin',
				showIdLink: false,
				//是否启用验证码
				showCaptcha: false,
				form: {
					user: "",
					password: "",
					autologin: false,
					captchaId: '',
					captcha: ''
				},
				rules: {
					user: [
						{required: true, message: this.$t('login.userError'), trigger: 'blur'}
					],
					password: [
						{required: true, message: this.$t('login.PWError'), trigger: 'blur'}
					]
				},
				islogin: false,
				captchaUrl: ''
			}
		},
		watch:{
			userType(val){
				if(val == 'admin'){
					this.form.user = 'admin'
					this.form.password = 'admin'
				}else if(val == 'user'){
					this.form.user = 'user'
					this.form.password = 'user'
				}
			}
		},
		mounted() {
			//开发环境时显示账号回填链接
			this.showIdLink = true
			this.form.user = "admin"
			this.form.password = "9dEEsDs4Oukc"
			// if (process.env.NODE_ENV == 'development') {
			// 	this.showIdLink = true
			// 	this.form.user = "admin"
			// 	this.form.password = "9dEEsDs4Oukc"
			// }
			//验证码ID
			this.form.captchaId = new String(uuidv4()).replace(/-/g,"")
		},
		methods: {
			randomImage() {				
				var rand = Math.random();
				this.captchaUrl = `${config.API_URL}/pub/captcha?id=${this.form.captchaId}&t=${rand}`
				this.showCaptcha = true
			},
			async login(){
				var validate = await this.$refs.loginForm.validate().catch(()=>{})
				if(!validate){ return false }
				this.islogin = true
				var data = {
					username: this.form.user,
					password: this.$TOOL.crypto.MD5(this.form.password),
				}
				//如果显示了验证码
				if (this.showCaptcha) {
					data.captchaId = this.form.captchaId
					data.captcha = this.form.captcha
				}
				//获取token
				var res = await this.$API.auth.token.post(data);
				if(res.code == 0){
					this.$TOOL.cookie.set("TOKEN", res.data.token, {
						expires: this.form.autologin? 24*60*60 : 0
					})
					//userInfo: {userId: "1", userName: "Administrator", dashboard: "0", role: ["SA", "admin", "Auditor"]}
					this.$TOOL.data.set("USER_INFO", { 
						userId: res.data.id,
						userName: res.data.username,
						name: res.data.name,
						dashboard: 0,
						role: []
					 })
				}else{
					this.islogin = false
					this.randomImage()
					this.$message.warning(res.msg)
					return false
				}
				//获取菜单
				let menu = await this.$API.system.my.menu.get()
				if(menu.code == 0){
					if(menu.data.menu.length==0){
						this.islogin = false
						this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
							type: 'error',
							center: true
						})
						return false
					}
					var menuTree = this.$API.auth.menuTree.build(menu.data.menu)
					this.$TOOL.data.set("MENU", menuTree)
					this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
				}else{
					this.islogin = false
					this.$message.warning(menu.msg)
					return false
				}

				this.$router.replace({
					path: '/'
				})
				this.$message.success("登录成功")
				this.islogin = false
			},
			// 设置管理账号
			setAdmin(){				
				this.form.user = 'admin'
				this.form.password = "9dEEsDs4Oukc"
			},
			// 设置一般用户
			setUser(){
				this.form.user = 'user'
				this.form.password = '9dEEsDs4Oukc'
			}
		}
	}

</script>

<style>
</style>
